<script>
import FetchPaging from '@/kk-ui/FetchPaging'
import CustomTableField from './components/CustomTableField'
import _ from 'lodash'


/**
 * EffectPage 获取请求数据，列表的字段配置，自定义配置的组合组件
 * 内部核心
 * @see {@link FetchPaging}
 * 组件组合而成。
 * @displayName EffectPage
 */
export default {
  name: 'EffectPage',
  components: {
    FetchPaging,
    CustomTableField
  },
  props: {
    /**
     * 来自常量文件的设置Id
     *
     */
    fieldsetId: { type: [String, Number] },
    /**
     * request之前触发
     */
    beforeRequest: {
      type: Function
    },
    /**
     * 默认的request 参数
     */
    defaultParamsValue: {
      type: Object
    },
    /**
     * OtherProps @see FetchPaging
     */
  },
  data() {
    return {
      fields: [],
      sortable: {},
      // 原始表所有字段
      originalFields: [],
      editId: 0,
      // 设定自定义组件状态类型数据
      options: [],
      // 设定自定义组件状态类型
      listType: 0
    }
  },
  mounted(){
    
  },
  watch: {
    fieldsetId: {
      immediate: true,
      handler() {
        this.getFields()
      }
    }
  },
  methods: {
    /**
     * @description 调用获取原始字段信息 与 自定义字段信息。
     */
    async getFields() {
      this.fields = await this.getRawFields()
    },
    /**
     * @description 获得原始字段类型 故意设计为异步方便之后扩展
     */
    getRawFields() {
      return Promise.resolve(
        this.$store
          .dispatch('fieldsets/getField', this.fieldsetId)
          .then(res => {
            return _.cloneDeep(res)
          })
      )
    },
    
    mergeBeforeRequest(params) {
      const temp = {
        ...params,
        sort: this.sortable.order,
        order: this.sortable.order
      }
      if (this.beforeRequest) {
        return this.beforeRequest(temp)
      } else {
        return temp
      }
    },
    /**
     * 重新执行request方法
     * @public
     */
    fetch() {
      return this.$refs.fetchpaging.fetch()
    },
    /**
     * 将页面设置为1，重新执行request方法
     * @public
     */
    refetch() {
      return this.$refs.fetchpaging.refetch()
    },
  },
  render() {
    let setFieldVnode

    if (!this.setCloseSwitch) {
      setFieldVnode = (
        <CustomTableField
          fields={this.fields}
        ></CustomTableField>
      )
    }
    setFieldVnode.data.slot = 'pageprepend'
    return (
      <FetchPaging
        // 没找到资料，为啥这样传值在FetchPaging中会被prop的default值覆盖？？
        // props={{
        //   this.$attrs
        // }}
        {...{ props: { ...this.$attrs } }}
        on={{
          ...this.$listeners
        }}
        ref="fetchpaging"
        beforeRequest={this.mergeBeforeRequest}
        scopedSlots={{
          /** @slot content scoped 展示内容的插槽
           *  @binding {any} data request返回的值
           *  @binding {Response} response
           *  @binding {Boolean} loading 是否是加载状态
           *  @binding {Array} fields  获取到的表单字段
           *  @binding {Function} handleSort 用来挂载到Element Table 组件上 sort-change事件
           *  @binding {VNode} setFieldVnode 设置自定义字段的虚拟DOM
           */
          content: ({ data, response, loading }) => {
            return this.$scopedSlots.content({
              data,
              response,
              loading,
              fields: this.fields,
              handleSort: this.handleSortChange,
              
            })
          }
        }}
      >
        {setFieldVnode}
      </FetchPaging>
    )
  }
}
</script>
